<template>
  <div>
    <div v-show="!isShowDetail">
      <jxf-titletip :title="title" @refreshPage="refreshFuc"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
          <el-form-item label="供应商账号:" prop="enterprisePhone">
            <el-input v-model.trim="searchInfo.enterprisePhone" clearable @keyup.enter.native="enterNextInput('enterpriseName')" ref="input-enterprisePhone"></el-input>
          </el-form-item>
          <el-form-item label="供应商企业名称:" prop="enterpriseName">
            <el-input v-model.trim="searchInfo.enterpriseName" clearable @keyup.enter.native="enterNextInput('merchantPhone')" ref="input-enterpriseName"></el-input>
          </el-form-item>
          <el-form-item label="采购商账号:" prop="merchantPhone">
            <el-input v-model.trim="searchInfo.merchantPhone" clearable @keyup.enter.native="enterNextInput('merchantName')" ref="input-merchantPhone"></el-input>
          </el-form-item>
          <el-form-item label="采购商企业名称:" prop="merchantName">
            <el-input v-model.trim="searchInfo.merchantName" clearable @keyup.enter.native="onSearch" ref="input-merchantName"></el-input>
          </el-form-item>
          <el-form-item label="绑定状态:" prop="status">
            <el-select v-model="searchInfo.status" clearable placeholder="全部">
              <el-option label="已失效" value="0"></el-option>
              <el-option label="保护中" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="addProtect">增加</el-button>
          </div>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="status" slot-scope="scope">
            <div v-if="scope.row.status === 0">已失效</div>
            <div v-if="scope.row.status === 1">保护中</div>
          </template>
          <template slot="createTime" slot-scope="scope">
            <div v-if="scope.row.status === 1">{{scope.row.createTime ? FormatDate.timeFormat(scope.row.createTime) : ""}}</div>
            <div v-if="scope.row.status === 0">{{scope.row.updateTime ? FormatDate.timeFormat(scope.row.updateTime) : ""}}</div>
          </template>
          <template slot="operation" slot-scope="scope">
            <el-button type="text" @click="watchDetail(scope.row)">查看详情</el-button>
            <el-button type="text" @click="deleteItem(scope.row)" v-if="scope.row.status == '0'">删除</el-button>
            <el-button type="text" @click="changeStatus(scope.row)" v-if="scope.row.status == '1'">解绑</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
      <AddProtect :isShowDetail.sync="isShowModel" @fresh="fresh"></AddProtect>
    </div>
    <ProtectDetail v-if="isShowDetail" :dataInfo="dataInfo" @goBack="goBack" @fresh="fresh"></ProtectDetail>
  </div>
</template>

<script>
  import FormatDate from '@/assets/js/formatDate'
  import ProtectDetail from './components/ProtectDetail'
  import AddProtect from './components/AddProtect'
    export default {
        name: "SubsidiaryProtection",
        components: { ProtectDetail, AddProtect },
        data() {
          return {
            title: "专属保护",
            searchInfo: {
              enterprisePhone: "",
              enterpriseName: "",
              merchantPhone: "",
              merchantName: "",
              status: null
            },
            isShowDetail: false,
            isShowModel: false,
            dataInfo: {},
            FormatDate: FormatDate,
            dataTable: {
              border:true,
              loading:false,
              hasSelect:false,
              tr: [
                {
                  id: '1',
                  minWidth: '100',
                  label: '供应商账号',
                  fixed: "left",
                  prop: 'enterprisePhone'
                },
                {
                  id: '2',
                  minWidth: '140',
                  label: '供应商企业名称',
                  prop: 'enterpriseName'
                },
                {
                  id: '3',
                  minWidth: '100',
                  label: '采购商账号',
                  prop: 'merchantPhone'
                },
                {
                  id: '4',
                  minWidth: '140',
                  label: '采购商企业名称',
                  prop: 'merchantName'
                },
                {
                  id: '5',
                  label: '绑定时间',
                  show: 'template',
                  prop: 'createTime'
                },
                {
                  id: '6',
                  label: '绑定状态',
                  show: 'template',
                  prop: 'status'
                },
                {
                  id: '7',
                  label: '操作',
                  show: 'template',
                  fixed: 'right',
                  minWidth:"200",
                  prop: 'operation'
                }
              ],
              data: []
            },
            pageTotal:0,
            pageSize:10,
            currentPage:1
          }
        },
        methods: {
          refreshFuc() {
            this.currentPage = 1;
            this.pageSize = 10;
            this.resetForm('searchInfo')
            this.onSearch()
          },
          changeStatus(obj) {
            let data = {
              id: obj.id
            }
            this.$confirm('此操作将解除绑定, 是否继续?', '解除绑定', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              ajax.post(apis.setting.changeProtectStatus, data).then(result => {
                if (result.code == "10000000") {
                  this.$message({
                    type: 'success',
                    message: '解除绑定成功!'
                  });
                  this.getData()
                } else {
                  this.$message.error(result.message)
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '取消操作'
              });
            });
          },
          addProtect() {
            this.isShowModel = true
          },
          fresh() {
            this.getData()
          },
          goBack() {
            this.dataInfo = {}
            this.isShowDetail = false
          },
          watchDetail(obj) {
            let data = {
              id: obj.id
            }
            ajax.post(apis.setting.getProtectDetail, data).then(res => {
              if(res.code == "10000000") {
                this.dataInfo.status = res.data.status;
                this.dataInfo.id = obj.id
                this.dataInfo.list = [
                  {
                    label: "供应商账号",
                    value: res.data.enterprisePhone
                  },
                  {
                    label: "供应商账号",
                    value: res.data.enterpriseName
                  },
                  {
                    label: "供应商行业分类",
                    value: res.data.classifyName
                  },
                  {
                    label: "采购商账号",
                    value: res.data.merchantPhone
                  },
                  {
                    label: "采购商名称",
                    value: res.data.merchantName
                  },
                  {
                    label: res.data.status == 0 ? "失效时间" : "绑定时间",
                    value: res.data.status == 0 ? res.data.updateTime ? FormatDate.timeFormat(res.data.updateTime) : '' :  res.data.createTime ? FormatDate.timeFormat(res.data.createTime) : ''
                  }
                ]
                this.isShowDetail = true;
              } else {
                this.$message.error(res.message)
              }
            })
          },
          deleteItem(obj) {
            let data = {
              id: obj.id
            }
            this.$confirm('此操作将删除此专属保护记录, 是否继续?', '删除保护关系', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              ajax.post(apis.setting.deleteProtect, data).then(result => {
                if(result.code == '10000000') {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  this.getData()
                } else {
                  this.$message.error(result.message)
                }
              })

            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });
            });
          },
          getData() {
            this.dataTable.loading = true;
            let data = {
              ...this.searchInfo,
              pageNum: this.currentPage,
              pageSize: this.pageSize
            };
            ajax.post(apis.setting.getProtectExclusiveList, data).then(res => {
              if(res.code === "10000000") {
                this.dataTable.data = res.data.dataList;
                this.pageTotal = res.data.total
              } else {
                this.$message.error(res.message)
              }
              this.dataTable.loading = false;
            })
          },
          enterNextInput(inputName) {
            this.$refs["input-" + inputName].focus();
          },
          onSearch() {
            this.currentPage = 1;
            this.getData()
          },
          // 切换页面
          currentPageChange(pageNo) {
            this.currentPage = pageNo
            this.getData()
          },
          // 切换页面条数
          pageSizeChange(pageNo) {
            this.pageSize = pageNo
            this.getData()
          },
          resetForm(formName) {
            this.$refs[formName].resetFields()
          }
        },
        created() {
          this.onSearch()
        }
    }
</script>

<style scoped>

</style>
